<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#div1{width: 200px; height: 100px; background-color: red;position: absolute; text-align: center; color: #fff; font-weight: bold;}
	</style>
	<script type="text/javascript">
	//第四：new一个对象出来
	window.onload = function (){
		new Drag('div1');
	};

	//第二：将函数内用到的具体的对象或局部变量，设置为全局变量
	/*var oDiv = null;
	var disX = 0;
	var disY = 0;  在第三步中放入Drag这个构造函数内*/

	// 第三 ：1.干掉window.onload变成构造函数。将写死的东西替换成参数，同时将所有全局变量放在这个构造函数内(如div1 -> id)
			//2. 把所有全局变量  变成-> 属性（如oDiv -> this.oDiv, disX -> this.DisX, disY -> this.DisY）
			//3. 函数 -> 方法。将构造函数以外的所有嵌套函数，变成它的方法(如function fnDown(ev){} -> Drag.prototype.fnDown = function(ev){}。最后记得把所有方法都添加this，指定赋给相应的函数)
	function Drag(id){				//构造函数
		var _this = this;

		this.disX = 0;
		this.disY = 0;
		this.oDiv = document.getElementById(id);
		
		this.oDiv.onmousedown = function(){								//构造函数
			_this.fnDown();												//有括号

			this.setCapture && this.setCapture();		//设置全局捕获和取消默认行为都要放在构造函数内(这里的this == _this.oDiv)
			return false;
		};
	}

	//第一：将所有嵌套的函数都揪出来（从里到外）
	Drag.prototype.fnDown = function (ev){				//别落下ev
		var ev = ev || event;
		var _this = this;

		this.disX = ev.clientX - this.oDiv.offsetLeft;
		this.disY = ev.clientY - this.oDiv.offsetTop;

		document.onmousemove = function (){
			_this.fnMove();			//有括号
		};

		document.onmouseup = function (){
			_this.fnUp();			//有括号
		};
/*
		this.oDiv.setCapture && this.oDiv.setCapture();	//******最后的最后，这一块需要移到构造函数当中，在这里不起作用********
		return false;*/
	}	

	Drag.prototype.fnMove = function (ev){
		var ev = ev || event;
		var L = ev.clientX - this.disX;
		var T = ev.clientY - this.disY;

		this.oDiv.style.left = L + 'px';
		this.oDiv.style.top = T + 'px';
	}

	Drag.prototype.fnUp = function (){
		document.onmousemove = document.onmouseup = null;
		this.oDiv.releaseCapture && this.oDiv.releaseCapture();
	}
	</script>
</head>
<body>qqqqq
	<div id="div1">拖拽我</div>
</body>
</html>